<?php
use yii\helpers\Html;
use yii\widgets\DetailView;
use yii\widgets\LinkPager;
use yii\helpers\Url;

$this->params['breadcrumbs'][] = $this->title;

?>


  <div class="mcCont mcgCont">
    
      
      <div class="right shipAddress">
        <h1 class="tt">收货地址</h1>
        <div class="saCont">

          <?php foreach ($address as $key => $value): ?>
            <div class="item">
              <h1 class="name"><?=Html::encode($value['name'])?></h1>
              <p class="phoneNUmber"><?=Html::encode($value['phone1'])?></p>
              <p class="addressDetail">
                <?=Html::encode($value['province1'].'　'.$value['city1'].'　'.$value['district1'])?>
                <br/> <?=Html::encode($value['address_detail'])?>
              </p>
              <span class="btns">
                <span class="rewriteItem" value="<?=$key?>">编辑</span>
                <span class="deleteItem" value = "<?=$value['id']?>">删除</span>
              </span>
            </div>
          <?php endforeach ?>

          <div class="item add" style="cursor:pointer">
            <p><i class="iconfont icon-jiahao"></i>添加新地址</p>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="mask" style="display: none;"></div>
  <div class="saPopDel">
    <i class="iconfont icon-close" ></i>
    <p class="txt">确定删除该地址吗</p>
    <p class="btns">
      <a class="btn-small-default" id="del_query">确定</a>
      <a class="btn-small-empty cancel">取消</a>
    </p>
  </div>

  <div class="saPopWrite" style="display:none">
    <i class="iconfont icon-close"></i>
    <h1 class="tt">管理收货地址</h1>
    <form action="" class="" id="myform">
      <p class="item ">
        <span class="itemTt">收货人姓名 <i class="iconfont icon-starfull"></i></span>
        <input type="text" class="input1">
        <!-- <span class="errorTxt">请输入正确的收货人姓名！</span> -->
      </p>
      <p class="item">
        <span class="itemTt">省份 <i class="iconfont icon-starfull"></i></span>

        <select name="" id="province" class="input2">
            <option value="">请选择</option>
          <?php foreach ($province as $key => $value): ?>
            <option value="<?=$value['id']?>"><?=Html::encode($value['name'])?></option>
          <?php endforeach ?>
        </select>

        <select name="" id="city"  class="input2">
          <option value="">请选择</option>
        </select>

        <select name="" id="town" class="input2">
          <option value="">请选择</option>
        </select>
        <!-- <span class="errorTxt">请选择正确的省份！</span> -->
      </p>
      <p class="item ">
        <span class="itemTt">详细地址 <i class="iconfont icon-starfull"></i></span>
        <input type="text" class="input3">
        <!-- <span class="errorTxt">请填写正确的详细地址！</span> -->
      </p>
      <p class="item ">
        <span class="itemTt">手机号码 <i class="iconfont icon-starfull"></i></span>
        <input type="text" class="input1" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11">
        <!-- <span class="errorTxt">请填写正确的手机号码！</span> -->
      </p>
      <p class="item ">
        <span class="itemTt">固定电话</span>
        <input type="text" class="input1">
        <!-- <span class="errorTxt">请填写正确的固定号码！</span> -->
      </p>
      <p class="item ">
        <span class="itemTt">邮政编码</span>
        <input type="text" class="input1" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="6">
        <!-- <span class="errorTxt">请填写正确的邮政编码！</span> -->
      </p>
      <input type="reset" name="reset" style="display: none;" />
    </form>
    <p class="btns">
      <a id="savedata" class="btn-small-default">保存</a>
      <a class="btn-small-empty cancel">取消</a>
    </p>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    //添加更改
    $('#savedata').click(function(){

      var save_update = new Array();
      save_update[0] = $('.saPopWrite').attr('value');    //为空是添加---为0是修改
      save_update[1] = $('.input1:eq(0)').val();
      save_update[2] = $('.input1:eq(1)').val();
      save_update[3] = $('.input1:eq(2)').val();
      save_update[4] = $('.input1:eq(3)').val();
      save_update[5] = $('.input3').val();
      save_update[6] = $('#province').val();
      save_update[7] = $('#city').val();
      save_update[8] = $('#town').val();

      if(!save_update[1] || !save_update[2] || save_update[2].length!=11 || !save_update[5] || !save_update[6] || !save_update[7] || !save_update[8]){
        layer.msg('数据有误，请核对！', {time: 1000});
        return false;
      }

      var list = JSON.stringify(save_update);

      $.ajax({
          url: '',
          type: 'POST',
          dataType: 'text',
          data:{ 'save_update':list},
          success: function(data){
            if(data>0){
              close('saPopWrite');
              var msg = '收货地址新增成功';
              if(save_update[0] != ""){
                var msg = '收货地址修改成功';
              }
              layer.msg(msg, {time: 1000}, function(){
                window.location.href = "";
              });
            }else{
              layer.msg('数据有误，请完善后重试', {time: 1000}, function(){
                //window.location.href = "";
              });
            }
                
          },
          error: function(){
              layer.msg('数据错误，请稍后重试', {time: 1000}, function(){
                window.location.href = "";
              });
          }
      });
    });
    //删除
    $('#del_query').click(function(){
      $.post('',{'add_del_id':$(this).attr('value')},function(data){
        if(data){
          close('saPopDel');
          layer.msg('收货地址删除成功', {time: 1000}, function(){
            window.location.href = "";
          });
        }
      });
    });
    //AJAX获取省级id对应的市的信息
    $('#province').on('change',function(){
      var city = '';
      var town = '';
      $('#town').html('');

      if($(this).val() == ''){
        $('#town').html('<option>请选择</option>');
        $('#city').html('<option>请选择</option>');
      }
      $.post('',{'province_id':$(this).val()},function(data){
        var data = eval('('+data+')');
        var para = data[0]['list'];

        for(var k in data){
          city += '<option value="'+data[k]["id"]+'">'+data[k]["name"]+'</option>';
        }
        for (var j in para) {
          town += '<option value="'+para[j]['id']+'">'+para[j]["name"]+'</option>';
        }
        $('#city').html('');
        $('#town').html(town);
        $('#city').html(city);
      });
    });

    $('#city').on('change',function(){
      var town;
      $('#town').html('');
      $.post('',{'city_id':$(this).val()},function(data){
        var data = eval('('+data+')');

        for(var k in data){
          town += '<option value="'+data[k]["id"]+'">'+data[k]["name"]+'</option>';
        }
        $('#town').html('');
        $('#town').html(town);
      });
    });

    //删除按钮点击--打开弹框
    $('.deleteItem').on('click',function(){
      $('#del_query').attr('value',$(this).attr('value'));
      open('saPopDel');
    });

    //添加，值可以为空
    $('.add').on('click',function(){
      open('saPopWrite');
    });
    
    //弹出遮罩和layer层
    function open(clss,index=""){
      $('#town').html('<option>请选择</option>');
      $('#city').html('<option>请选择</option>');
      $('.'+clss).attr('style','display:block').attr('value',index);
      $(".mask").attr('style','display:block');
    }

    //close('saPopWrite');
    //关闭弹窗和遮罩-------传入要关闭的弹框的class即可
    function close(clss){
      if(clss == 'saPopWrite'){
        $('.input1:eq(0)').val('');
        $('.input1:eq(1)').val('');
        $('.input1:eq(2)').val('');
        $('.input1:eq(3)').val('');
        $('.input3').val('');

        $('#town').html('<option>请选择</option>');
        $('#city').html('<option>请选择</option>');
        var select = document.getElementById("province");  
        for(var i=0; i<select.options.length; i++){  
          if(select.options[i].innerHTML == "请选择"){  
            select.options[i].selected = true;
            break;
          }
        }
      }
      $('.'+clss).attr('style','display:none');
      $(".mask").attr('style','height:0%');
    }
    //取消button
    $('.cancel').on('click',function(){
      close($(this).parent('p').parent('div').attr('class'));
    });
    //对话框右上角的X
    $('.icon-close').on('click',function(){
      close($(this).parent('div').attr('class'));
    });

    //修改、AJAX获取数据写入到页面
    $('.rewriteItem').on('click',function(){

      $.post('',{'addr_id':$(this).attr('value')},function(data){
        var data = eval('('+data+')');
        $('.input1:eq(0)').val(data['name']);
        $('.input1:eq(1)').val(data['phone']);
        $('.input1:eq(2)').val(data['tel']);
        $('.input1:eq(3)').val(data['zip_code']);
        $('.input3').val(data['address_detail']);

        var select = document.getElementById("province");  
        for(var i=0; i<select.options.length; i++){  
          if(select.options[i].innerHTML == data['province1']){  
            select.options[i].selected = true;
            break;
          }
        }
        $.post('',{'province_id':select.options[i].value},function(json){
          var json = eval('('+json+')');
          var para = json[0]['list'];
          var city = '';
          var town = '';
          
          for(var k in json){
            city += '<option value="'+json[k]["id"]+'">'+json[k]["name"]+'</option>';
          }
          for (var j in para) {
            town += '<option value="'+para[j]['id']+'">'+para[j]["name"]+'</option>';
          }

          $('#city').html('');
          $('#town').html(town);
          $('#city').html(city);

          var select1 = document.getElementById("city");  
          for(var i=0; i<select1.options.length; i++){  
            if(select1.options[i].innerHTML == data['city1']){  
              select1.options[i].selected = true;
              break;
            }
          }
          var select2 = document.getElementById("town");  
          for(var i=0; i<select2.options.length; i++){  
            if(select2.options[i].innerHTML == data['district1']){  
              select2.options[i].selected = true;
              break;
            }
          }
        });
      });
      //弹出弹框
      open('saPopWrite',$(this).attr('value'));
    });
  });
</script>